<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
		 -->
		<!-- 创建容器 -->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button type="button" @click="changeweather">切换天气</button>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false

			//创建vue实例
			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true,
				},
				methods: {
					changeweather() {
						this.isHot = !this.isHot
					}
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					}
				},
				//watch表示监事属性列表
				watch: {
/* 				//isHot是data中的一个被监视的属性
					isHot: {
						immediate: true, //初始化时直接调用handler
						deep:true,//深度监视
						//当isHot被修改时，handler被调用
						handler(newValue, oldValue) {
						console.log(newValue, oldValue)
							}
						} */
						
						//简写1
						isHot(newValue,oldValue){
							console.log(newValue, oldValue)
						}
				},
			})
			//简写2
			vm.$watch('isHot',function(newValue,oldValue){
				console.log(newValue, oldValue)
			})


		</script>
	</body>
</html>
